<script setup>
import PageList from '@/components/page-list/index.vue'
import EmptyData from '@/components/empty-data/index.vue'
import IconSimple from '@/components/icon-simple/index.vue'
import Cell from '@/components/cell/index.vue'
import CellItem from '@/components/cell-item/index.vue'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import {usePopup} from '@/hooks/usePopup'
import {navigateTo} from '@/utils/uni-api-wrap/route'

const { popup, close, open } = usePopup()

const signDetail = ref('')

const toSignDetail = item => {
  if (item.sign) {
    signDetail.value = item
    open()
  } else {
    navigateTo(`/pages/scan/sign?id=${item.info?.id}`)
  }
}

const popupChange = ({ show }) => {
  if (!show) {
    signDetail.value = ''
  }
}

// watch(popup, p => p && open())
</script>

<template>
  <!--
  todo page-list组件已经封装了分页请求，字需要填写分页接口地址就行。需要注意的是，该组件期望
       接口的返回值是{code, data: { data, total, has_next }, msg}.如果不是请自行到组
       件内修改73-82行的内容
   -->
  <page-list method="post" url="/conference/sign/pages">
    <template #default="{ list, firstLoading, loading, has_next }">
      <!--
        在此作用域内暴露了list,firstLoading,loading,has_next
        - list: 分页接口请求到的数据列表,可以直接v-for渲染
        - firstLoading: 是否是第一次请求
        - loading: 是否在请求中
        - has_next: 是否还有下一页
      -->
      <view class="approval-list-page-container" v-if="list.length > 0">
        <view class="list__container">
          <view class="list-item__container" v-for="(item,index) in list" :key="index" @click="toSignDetail(item)">
            <image class="list-item__cover" :src="item.info?.imageUrl" mode="aspectFill" />
            <view class="list-item__context">
<!--              <view class="list-item__seal list-item&#45;&#45;isin" v-if="!item.sign">未签到</view>-->
<!--              <view class="list-item__seal list-item&#45;&#45;isdone" v-else>已签到</view>-->
              <view class="list-item__title">{{ item.info?.name }}</view>
              <view class="list-item__time">{{ item.info?.activityTimeStr }}</view>
              <view class="list-item__desc">{{ item.info?.address }}</view>
            </view>
          </view>
        </view>
      </view>
      <empty-data class="empty-data-large" v-if="list.length === 0 && !firstLoading" />
    </template>
  </page-list>
  <uni-popup ref="popup" type="center" :safe-area="false" @change="popupChange">
    <template #default>
      <view class="approvaling__container">
        <icon-simple name="message4" :size="42" />
        <cell class="mt32 cell" size="small" value-dark-color text-align="left">
          <cell-item label="申请人" :value="signDetail.register?.firstName" />
          <cell-item label="手机号" :value="signDetail.register?.mobile" />
          <cell-item label="性别" :value="signDetail.register?.gender === 1 ? '男' : '女'" />
          <cell-item label="公司" :value="signDetail.register?.companyName" />
          <cell-item label="职位" :value="signDetail.register?.duties" />
        </cell>
      </view>
    </template>
  </uni-popup>
</template>

<style scoped lang="scss">
.approval-list-page-container {
  box-sizing: border-box;
  padding: 16rpx;
  min-height: 100vh;
  background-color: #F2F2F2;
}
.list__container {
  padding: 14rpx 10rpx;
  border-radius: 10rpx;
  background-color: #fff;
  overflow: hidden;
  .list-item__container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    background-color: #F6F9FF;
    overflow: hidden;
    .list-item__cover {
      flex: 0 0 172rpx;
      width: 172rpx;
      height: 172rpx;
      border-radius: 10rpx;
      overflow: hidden;
    }
    .list-item__context {
      position: relative;
      margin-left: 36rpx;
      .list-item__title {
        @include fs36w600;
        text-align: left;
        @include text-overflow-lines;
      }
      .list-item__time {
        @include fs28w400($kaoyan-color-10);
        text-align: left;
      }
      .list-item__desc {
        @include fs32w400;
        text-align: left;
        @include text-overflow-lines(1);
      }
      .list-item__seal {
        position: absolute;
        right: 0;
        bottom: -18px;
        width: 180rpx;
        height: 184rpx;
        @include fs28w400(#FF0000);
        line-height: 180rpx;
        transform: rotate(-15deg);
        background: url("http://staticservice.public.qingquan.website:1280/Picture/seal.png") no-repeat;
        background-size: contain;
        z-index: 0;
      }
    }
  }
}
.approvaling__container,
.approvaled__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66rpx 40rpx;
  margin: 0 auto;
  width: 680rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
  .cell {
    width: 100%;
  }
  .approvaling__context {
    @include fs36w500;
  }
}
.approvaled__container {
  padding-bottom: 24rpx;
  .approvaling__context {
    width: 80%;
    text-align: left;
  }
  .button-x {
    display: block;
    width: 100%;
  }
}
</style>
